<script  setup>
import {ref} from "vue";
import MyButton from "@/components/myComponents/MyButton.vue"

const val = ref("默认值");

const searchFn=(seachText)=>{
    // 1、拿到文本框输入的内容
    console.log("seachText",seachText);
    // 2、发送请求
}

const mybuttonRef = ref();

const loadFn=()=>{
    mybuttonRef.value.fn01();
    mybuttonRef.value.fn02();
    mybuttonRef.value.fn03();
}
const clearText=()=>{
    // console.log("mybuttonRef.value",mybuttonRef.value);
    mybuttonRef.value.clear();
}
</script>

<template>
    <h1>使用二次封装的组件的示例</h1>
    <MyButton ref="mybuttonRef"  class="cls" round="true" type="success" @click="searchFn" :value="val" loading="true" clearable="true" :isborder="true" >
        <template #prefix>
            <div>头部内容</div>
        </template>
        <template #middle>
            <el-icon :size="20">
                <Edit></Edit>
            </el-icon>
        </template>
    </MyButton>

    <input type="button" value="调用组件的方法" @click="loadFn">
    <input type="button" value="清除文本框的值" @click="clearText">

</template>

<style lang="css" scoped>
    
</style>
